<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<uni-nav-bar height="135rpx" 
			 leftWidth='200rpx' rightWidth='200rpx'
			 @clickLeft="gos" left-icon="left" leftText="返回" title="设置" />
			<!-- 修改手机号 修改密码 -->
			<view class="amend">
				<!-- 修改手机号 -->
				<view class="amend_tel" @click="$utils.go('/pages/amend/phone1')">
					<view class="tel_box">
						<i class="iconfont icon-dianhua2 tels"></i><span class="tel">修改手机号</span>
					</view>
					<view class="nav_more">
						<i class="iconfont icon-dayuhao da"></i>
					</view>
				</view>
				<!-- 修改密码 -->
				<view class="amend_pwd" @click="$utils.go('/pages/amend/code')">
					<view class="pwd_box">
						<i class="iconfont icon-suo1 pwds"></i><span class="pwd">修改密码</span>
					</view>
					<view class="navs">
						<i class="iconfont icon-dayuhao yu"></i>
					</view>
				</view>
			</view>
		</view>

		<!-- 清除缓存 当前版本 -->
		<view class="test_box">
			<!-- 清除缓存 -->
			<view class="clear_box">
				<view class="clear">
					<i class="iconfont icon-shuazi shua"></i><span class="cache">清除缓存</span>
				</view>
				<view class="nativ">
					<span class="size">12M</span> <i class="iconfont icon-dayuhao hao"></i>
				</view>
			</view>
			<!-- 当前版本 -->
			<view class="present_box">
				<view class="present">
					<i class="iconfont icon-wode-dangqianbanben dangs"></i><span class="ben">当前版本</span>
				</view>
				<view class="nativs">
					<span class="sizes">1.0.0</span> <i class="iconfont icon-dayuhao qian"></i>
				</view>
			</view>
			<button class="btn" @click="$utils.go('/pages/login/login')">退出当前账号</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
            gos(){
				uni.switchTab({
					url:'/pages/vip/vip'
				})
			}
		}
	}
</script>

<style>

	page {
		width: 100%;
		height: 100vh;
		background-color: #efefef;
	}

	/* 头部 */
	.header {
		width: 100%;
		height: 335rpx;
		background-color: white;
	}

	/deep/.uni-navbar__content{
		border: none;
	}
	/deep/.uni-navbar-btn-text span {
		font-size: 20rpx !important;
	}
	/deep/.uni-nav-bar-text {
		font-size: 25rpx !important;
	}
	/* 修改手机号 修改密码 */
	.amend {
		height: 205rpx;
	}

	.amend_tel {
		width: 100%;
		height: 95rpx;
		margin-left: 10rpx;
		border-bottom: 1px solid #efefef;
		display: flex;
		justify-content: space-between;
	}

	.tel_box {
		height: 95rpx;
	}

	.tel_box i {
		font-size: 30rpx;
		color: #d17e6a;
		height: 95rpx;
		line-height: 95rpx;
		padding-left: 20rpx;
	}

	.tel_box .tels {
		font-size: 30rpx;
	}

	.tel_box .tel {
		font-size: 25rpx;
		padding-left: 10rpx;
	}

	.nav_more {
		width: 50rpx;
		height: 95rpx;
		line-height: 95rpx;
		font-size: 20rpx;
		color: #898989;
	}

	.da {
		font-size: 20rpx;
	}

	.amend_pwd {
		width: 100%;
		height: 110rpx;
		margin-left: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.pwd_box {
		width: 175rpx;
		height: 95rpx;
	}

	.pwd_box i {
		font-size: 30rpx;
		color: #34cb66;
		height: 95rpx;
		line-height: 95rpx;
		padding-left: 20rpx;
	}

	.pwd_box .pwds {
		font-size: 30rpx;
	}

	.pwd_box .pwd {
		font-size: 25rpx;
		padding-left:10rpx ;
	}

	.navs {
		width: 50rpx;
		height: 95rpx;
		line-height: 95rpx;
		font-size: 20rpx;
		color: #898989;
	}

	.yu {
		font-size: 20rpx;
	}

	/* 清除缓存 当前版本 */
	.test_box {
		width: 100%;
		height: 230rpx;
		background-color: white;
		margin-top: 25rpx;
	}

	.clear_box {
		width: 100%;
		height: 110rpx;
		margin-left: 10rpx;
		border-bottom: 1px solid #efefef;
		display: flex;
		justify-content: space-between;
	}

	.clear {
		width: 175rpx;
		height: 110rpx;
	}

	.clear i {
		font-size: 30rpx;
		color: #1a8ee9;
		height: 95rpx;
		line-height: 110rpx;
		padding-left: 20rpx;
	}

	.clear .shua {
		font-size: 30rpx;
	}

	.clear .cache {
		font-size: 25rpx;
	}

	.nativ {
		width: 130rpx;
		height: 110rpx;
		line-height: 110rpx;
		font-size: 25rpx;
		color: #898989;
		background-color: white;
	}

	.size {
		color: #1a8ee9;
		font-size: 25rpx;
	}

	.hao {
		padding-left: 30rpx;
		font-size: 20rpx;
	}

	.present_box {
		width: 100%;
		height: 110rpx;
		margin-left: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.present {
		width: 175rpx;
		height: 110rpx;
	}

	.present i {
		font-size: 30rpx;
		color: #55d380;
		height: 110rpx;
		line-height: 110rpx;
		padding-left: 20rpx;
	}

	.present .dangs {
		font-size: 30rpx;
		padding-left: 10rpx;
	}

	.present .ben {
		font-size: 25rpx;
		padding-left: 10rpx;
	}

	.nativs {
		width: 130rpx;
		height: 110rpx;
		line-height: 110rpx;
		font-size: 25rpx;
		color: #898989;
		background-color: white;
	}

	.sizes {
		color: #1a8ee9;
		font-size: 25rpx;
	}

	.qian {
		padding-left: 30rpx;
		font-size: 20rpx;
	}
	button{
		width:515rpx ;
		height:75rpx ;
		color: white;
		background-color:#5da5f1 ;
		margin-top: 120rpx;
		border-radius: 50rpx;
		line-height: 75rpx;
	}
</style>